<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button icon="Back" @click="goBack">返回</el-button>
        <span class="page-title">详情</span>
      </div>
      <div class="header-right">
        <span class="user-info">已审核</span>
      </div>
    </div>

    <!-- 详情内容 -->
    <div class="detail-content" v-loading="loading">
      <el-card class="detail-card">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="标题">{{ detailForm.title }}</el-descriptions-item>
          <el-descriptions-item label="发布者">{{ detailForm.publisher }}</el-descriptions-item>
          <el-descriptions-item label="发布时间">{{ parseTime(detailForm.time, '{y}-{m}-{d}') }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(detailForm.status)">
              {{ getStatusText(detailForm.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="咨询电话">{{ detailForm.telephone }}</el-descriptions-item>
          <el-descriptions-item label="预览图" :span="2">
            <div v-if="detailForm.img" class="image-container">
              <el-image 
                :src="detailForm.img" 
                fit="cover"
                style="width: 200px; height: 150px;"
                :preview-src-list="[detailForm.img]"
              />
            </div>
            <span v-else>暂无图片</span>
          </el-descriptions-item>
          <el-descriptions-item label="发布内容" :span="2">
            <div class="content-display" v-html="detailForm.content"></div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 审核记录 -->
      <el-card class="audit-record-card" v-if="auditRecords.length > 0">
        <template #header>
          <span>审核记录</span>
        </template>
        <el-table :data="auditRecords" border>
          <el-table-column label="审核时间" align="center" prop="auditTime" />
          <el-table-column label="审核结果" align="center" prop="auditResult">
            <template #default="scope">
              <el-tag :type="scope.row.auditResult === 2 ? 'success' : 'danger'">
                {{ scope.row.auditResult === 2 ? '审核通过' : '审核不通过' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="审核说明" align="center" prop="auditDescription" />
          <el-table-column label="审核人" align="center" prop="auditor" />
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script setup name="ApprovedDetail">
import { getApproved } from "@/api/system/approved"
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

const loading = ref(true)
const detailForm = ref({})
const auditRecords = ref([])

/** 获取详情数据 */
function getDetail() {
  const id = route.params.id
  if (id) {
    loading.value = true
    getApproved(id).then(response => {
      detailForm.value = response.data
      // 如果有审核状态，创建审核记录
      if (detailForm.value.status === 2 || detailForm.value.status === 3) {
        auditRecords.value = [{
          auditTime: detailForm.value.time,
          auditResult: detailForm.value.status,
          auditDescription: detailForm.value.status === 2 ? '审核通过' : '审核不通过',
          auditor: '管理员'
        }]
      }
      loading.value = false
    }).catch(() => {
      loading.value = false
      proxy.$modal.msgError("获取详情失败")
    })
  }
}

/** 获取状态类型 */
function getStatusType(status) {
  switch (status) {
    case 0: return 'warning' // 待审核
    case 1: return 'success' // 上架
    case 2: return 'success' // 审核通过
    case 3: return 'danger'  // 审核不通过
    default: return 'info'
  }
}

/** 获取状态文本 */
function getStatusText(status) {
  switch (status) {
    case 0: return '待审核'
    case 1: return '上架'
    case 2: return '审核通过'
    case 3: return '审核不通过'
    default: return '未知'
  }
}

/** 返回上一页 */
function goBack() {
  router.go(-1)
}

// 页面加载时获取数据
onMounted(() => {
  getDetail()
})
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info {
  color: #606266;
  font-size: 14px;
}

.detail-content {
  padding: 0 20px;
}

.detail-card {
  margin-bottom: 20px;
}

.audit-record-card {
  margin-bottom: 20px;
}

.image-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.content-display {
  line-height: 1.6;
  color: #303133;
}

.content-display :deep(img) {
  max-width: 100%;
  height: auto;
}
</style> 